<template>
  <div class="app-container">
    <!-- excel上传组件
         :on-success    当文件上传解析成功后触发的函数 => 可以解构出 { results, header }
         :before-upload 上传之前校验（大小，文件后缀）return true / false
    -->
    <upload-excel :on-success="handleSuccess" :before-upload="beforeUpload" />

    <!-- 表格 => 渲染上传得到的数据 -->
    <el-table :data="tableData" style="width: 100%;margin-top:20px;">
      <!-- 动态生成 => tableHeader -->
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>

    <hr>
    <!-- 移花接木 -->
    <!-- 对于文件选择框 => change选择的文件变化时触发 => 无法重复选择同一个文件 -->
    <input ref="myfile" type="file" style="display: none" @change="handleSelect">

    <div class="box" @click="$refs.myfile.click()">
      +
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test6Page',
  data() {
    return {
      tableData: [],
      tableHeader: []
    }
  },
  methods: {
    beforeUpload(file) {
      // 判断当前的文件大小是否小于 1 M
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        // true 通过校验
        return true
      }

      // 大于1M
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      // results 数据列表，每一行的信息数据
      // header  表头信息
      console.log(results, header)
      this.tableData = results
      this.tableHeader = header
    },
    handleSelect(e) {
      const file = e.target.files[0]
      console.log(file)
      // 拿到文件对象后，输入框的value就可以清空了，保证下次还可以选中当前文件
      this.$refs.myfile.value = null
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 80px;
  border: 3px solid #ccc;
  margin: 10px;
  cursor: pointer;
}
</style>
